<template>
  <div>
    <van-sticky :offset-top="top">
      <div class="tab-menu">
        <scroll-view
          class="horizontal-bar flex"
          :scroll-into-view="'category-top-' + categoryActive"
          :scroll-x="true">
          <div
            class="item-bar flex-item"
            :id="leftMenuClick ? '' : 'category-top-' + item.enterpriseCategoryId"
            :class="{'item-bar--active': categoryActive === item.enterpriseCategoryId}"
            v-for="(item, index) in categoryList"
            :key="index"
            @click="tabClick(item, index)">
              <div class="item-txt">
                {{item.categoryName}}
                <div :class="{'leftline': categoryActive === item.enterpriseCategoryId}"></div>
              </div>              
          </div>
        </scroll-view>
        <div class="tab-more" :class="iosType ? '' : 'tab-more-and'" @click="tabLayerShow">
          <span>筛选</span>
          <img v-if="fileSpace" class="width-15 height-13 mar-l-2" :src="fileSpace + '/images/home-category.png'" alt="">
        </div>
      </div>
      <div class="select-row flex flex-between border-b bg-color-white">
        <div class="flex-item flex flex-center"
          v-for="(item, index) in selectList"
          :key="index"
          @click="selectClick(item)"
          :class="{'select-active': selectActive === item.selectId}">
          {{item.selectName}}
          <van-icon name="play" size="10px" :class="{'upSort': item.sort !== 1}" />
        </div>
      </div>
    </van-sticky>
    <div class="goods-bar">
      <div class="goods-card">
        <div class="goods-item mar-t-10" 
          v-for="(item,index) in goodsList" :key="index" 
          @click="$pt.navigateTo({url: '/pages/shop/detail/main?goodsId=' + item.goodsId + '&goodsType=' + item.goodsType})">
          <div class="width-123 height-123">
            <img :src="item.mainImage + '?imageView2/2/w/250'" v-if="item.mainImage" alt="" class="width-123 height-123">
          </div>
          <div class="goods-content mar-l-9">
            <div class="goods--title__row line-1">
              <span class="goods-tag" v-if="item.anchorGoodsStatus === 2">免费寄样</span>
              {{item.title}}
            </div>
            <div class="goods-sell font-11 mar-t-5">
              <span class="font-color-9">已售<span class="color-num">{{item.salesNum}}</span>{{item.unit}}</span>
              <div class="dividing mar-l-5 mar-r-5"></div>
              <span class="font-color-6">{{item.anchorSalePeople}}位网红在卖</span>
            </div>
            <div class="height-17 mar-t-3">
              <div class="v-align-c font-11 font-color-9" 
                v-if="item.tiktokAuthority || item.quickAuthority || item.anchorPlatformShopType || item.taobaoAuthority">
                <span>支持</span>
                <img
                  v-if="fileSpace && item.tiktokAuthority"
                  :src="fileSpace + '/images/auchor-tiktok-icon.png'"
                  class="width-14 height-14 radius-4 mar-l-4"
                  alt="">
                <img
                  v-if="fileSpace && item.quickAuthority"
                  :src="fileSpace + '/images/auchor-quick-icon.png'"
                  class="width-14 height-14 radius-4 mar-l-4"
                  alt="">
                <img
                  v-if="fileSpace && item.anchorPlatformShopType"
                  :src="fileSpace + '/images/auchor-wechat-icon.png'" 
                  class="width-14 height-14 radius-4 mar-l-4" 
                  alt="" />
                <img
                  v-if="fileSpace && item.taobaoAuthority"
                  :src="fileSpace + '/images/auchor-taobao-icon.png'"
                  class="width-14 height-14 radius-4 mar-l-4"
                  alt="">
              </div>
            </div>
            <div class="flex flex-between mar-t-5">
              <div>
                <div class="color-num font-11">{{ anchored ? '￥' : '' }}<span class="font-16">{{ anchored ? item.income : '***' }}</span></div>
                <div class="font-11 mar-t--2" style="color:#F82A37">预计赚</div>
              </div>
              <div class="font-color-9">
                <div class="font-16">{{ anchored ? item.anchorRatio : '***'}}{{anchored ? '%' : ''}}</div>
                <div class="font-11 mar-t--2">佣金比例</div>
              </div>
              <div class="font-color-9">
                <div class=" font-11">{{ anchored ? '￥' : '' }}<span class="font-16">{{ anchored ? item.sellPrice : '***' }}</span></div>
                <div class="font-11 mar-t--2">观众购买价</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div @touchmove.prevent="">
      <van-popup
        :show="tabLayer"
        position="right"
        custom-style="width: 80%; height: 100%;"
        @close="onPopupClose"
      >
        <div class="popup-layer" :style="'padding-top:' + top + 'px;'">
          <h3>筛选</h3>
          <ul>
            <li v-for="(item, index) in selectList" :key="index">
              <div class="li-item" :class="{'active': selectActive === item.selectId}" @click="onSelectClick(item)">{{item.selectName}}</div>
            </li>
          </ul>
          <h3>分类</h3>
          <ul>
            <li v-for="(item, index) in categoryList" :key="index">
              <div class="li-item" :class="{'active': categoryActive === item.enterpriseCategoryId}" @click="onCategoryClick(item)">{{item.categoryName}}</div>  
            </li>
          </ul>
          <div class="bottom-btn flex flex-between pad-l-15 pad-r-15" :style="{'position': positionSticky ? 'sticky' : 'fixed'}">
            <div class="reset-btn" @click="resetCondition">重置</div>
            <div class="comfirm-btn" @click="confirmCondition">确定</div>
          </div>
        </div>
      </van-popup>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    categoryList: {
      type: Array,
      default: function() {
        return []
      }
    },
    goodsList: {
      type: Array,
      default: function() {
        return []
      }
    },
    categoryActiveId: {
      type: String,
      default: ''
    },
    top: {
      type: String || Number,
      default: 0
    }
  },
  data() {
    return {
      categoryActive: '',
      iosType: true,
      tabLayer: false,
      selectList: [{
        selectName: '新品',
        selectId: '0',
        sort: 1
      }, {
        selectName: '销量',
        selectId: '1',
        sort: 1
      }, {
        selectName: '佣金',
        selectId: '2',
        sort: 1
      }],
      selectActive: '0',
      currentPage: 1,
      categoryParams: {
        categoryActive: '',
        createTimeSort: 1,
        anchorRatioSort: '',
        salesNumSort: ''
      },
      positionSticky: false,
      timer: null
    }
  },
  computed: {
    anchored() {
      return this.getCustomerId && this.getAnchorType
    }
  },
  watch: {
    categoryActiveId(val) {
      this.categoryActive = val
      this.categoryParams.categoryActive = this.categoryActive
      // this.$emit('onChange', this.categoryParams)
    },
    categoryList(val) {
      if (val.length > 0) {
        this.categoryParams.categoryActive = this.categoryActive
      }
    }
  },
  mounted() {
  },
  methods: {
    tabClick(item) {
      if (this.$parent.finishedEls) return
      this.$parent.finishedEls = true
      this.categoryActive = item.enterpriseCategoryId
      this.categoryParams.categoryActive = this.categoryActive
      this.$emit('categoryAction', this.categoryActive)
      this.$emit('onChange', this.categoryParams)
    },
    selectClick(item) {
      this.selectChange(item)
      this.$emit('onChange', this.categoryParams)
    },
    // 打开筛选层
    tabLayerShow() {
      this.tabLayer = true
      this.$nextTick(() => {
        // 监听筛选最后一个item与顶部的距离，来判断底部操作按钮的样式
        const query = this.$pt.createSelectorQuery().selectAll('.li-item')
        query.boundingClientRect(rects => {
          let rect = rects[rects.length - 1]
          if (rect.top > 555) {
            this.positionSticky = true
          } else {
            this.positionSticky = false
          }
        }).exec()
      })
    },
    // 关闭筛选层
    onPopupClose() {
      this.tabLayer = false
    },
    // 重置筛选条件
    resetCondition() {
      this.onPopupClose()
      this.resetData()
    },
    // 重置筛选条件
    resetData() {
      this.categoryActive = this.categoryList[0].enterpriseCategoryId
      this.categoryParams.categoryActive = this.categoryActive
      this.categoryParams.createTimeSort = 1
      this.categoryParams.anchorRatioSort = ''
      this.categoryParams.salesNumSort = ''
      this.selectActive = '0'
      this.$emit('categoryAction', this.categoryActive)
      this.$emit('onChange', this.categoryParams)
    },
    // 确定筛选
    confirmCondition() {
      this.$emit('onChange', this.categoryParams)
      this.onPopupClose()
    },
    // 筛选层选择 排序方式
    onSelectClick(item) {
      this.selectChange(item)
    },
    onCategoryClick(item) {
      this.categoryActive = item.enterpriseCategoryId
      this.categoryParams.categoryActive = this.categoryActive
      this.$emit('categoryAction', item.enterpriseCategoryId)
    },
    selectChange(item) {
      switch (item.selectId) {
        case '0':
          this.categoryParams.createTimeSort = parseInt(this.categoryParams.createTimeSort) ? '0' : 1
          this.selectList.forEach(val => {
            val.sort = 1
          })
          item.sort = this.categoryParams.createTimeSort
          this.categoryParams.salesNumSort = ''
          this.categoryParams.anchorRatioSort = ''
          break
        case '1':
          this.categoryParams.salesNumSort = parseInt(this.categoryParams.salesNumSort) ? '0' : 1
          this.selectList.forEach(val => {
            val.sort = 1
          })
          item.sort = this.categoryParams.salesNumSort
          this.categoryParams.createTimeSort = ''
          this.categoryParams.anchorRatioSort = ''
          break
        case '2':
          this.categoryParams.anchorRatioSort = parseInt(this.categoryParams.anchorRatioSort) ? '0' : 1
          this.selectList.forEach(val => {
            val.sort = 1
          })
          item.sort = this.categoryParams.anchorRatioSort
          this.categoryParams.createTimeSort = ''
          this.categoryParams.salesNumSort = ''
          break
        default:
          break
      }
      this.selectActive = item.selectId
    }
  }
}
</script>
<style lang="less" scoped>
.tab-menu{
  background: #fff;
  min-height: 44px;
  padding-right: 70px;
  box-sizing: border-box;
  width: 100%;
  position: relative;
  z-index: 10;
  border-bottom: 0.5px solid #eeeeee;
  border-top: 0.5px solid #eeeeee;
  .tab-more{
    width: 65px;
    height: 40px;
    position: absolute;
    right: 0;
    top: 2px;
    z-index: 11;
    display: flex;
    align-items: center;
    &.tab-more-and{
      top: 3px;
    }
  }
}
.horizontal-bar {
  height: 44px;
  white-space: nowrap;
  overflow-x: scroll;
  &:after{
    content: '';
    display: block;
    clear: both;
    font-size: 0;
  }
  .item-bar {
    display: inline-block;
    height: 44px;
    line-height: 44px;
    width: 97px;
    font-size: 16px;
    color: #333;
    font-size: 15px;
    text-align: center;
    overflow: hidden;
    .item-txt{
      display: inline-block;
      position: relative;
    }
    &--active {          
      font-weight: bold;
      .leftline {
        position: absolute;
        background: #7427FF;
        left: 50%;
        transform: translate(-50%);
        bottom: 6px;
        height: 3px;
        width: 18px;
        border-radius: 3px;
      }
    }
  }
}
.goods-bar{
  padding: 0px 15px 15px;
  // min-height: 300px;
  .goods-card{
    .goods-item{
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      overflow: hidden;
      border-radius: 5px;
      .goods-content{
        flex: 1;
        padding-top: 11px;
        .goods--title__row{
          font-size: 15px;
          font-weight: bold;
          height: 15px;
          line-height: 15px;
          .goods-tag{
            color: #F8303D;
            background-color: rgba(248, 48, 61, .1);
            border-radius: 2px;
            font-size: 11px;
            padding: 0px 3px;
            margin-right: 3px;
            height: 15px;
            line-height: 15px;
            display: inline-block;
          }
        }
        .goods-sell{
          display: flex;
          align-items: center;
          justify-content: flex-start;
          .dividing{
            width: 0.5px;
            height: 10px;
            background-color: #CCCCCC;
          }
        }
        .color-num{
          color: #F8303D;
        }
      }
    }
  }
}
.popup-layer{
  height: 100%;
  position: fixed;
  box-sizing: border-box;
  // padding-bottom: 70px;
  overflow-y: scroll;
  h3{
    line-height: 1;
    padding: 16px 15px 0;
    font-size: 15px;
    color: #333;
  }
  ul{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 5px 15px 0;
    li{
      // flex-shrink: 0;
      margin-top: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 calc(100% / 3);
      &:nth-child(3n + 1) {
        justify-content: flex-start;
      }
      &:nth-child(3n) {
        justify-content: flex-end;
      }
      .li-item{
        width: 76px;
        height: 32px;
        border-radius: 16px;
        background-color: #F5F5F5;
        font-size: 12px;
        color: #333;
        text-align: center;
        line-height: 32px;
        box-sizing: border-box;
          &.active{
          border: 1px solid #FFE200;
          background-color: #FFFBD8;
          width: 74px;
          height: 30px;
          line-height: 30px;
        }
      }
    }
  }
  .bottom-btn{
    // position: sticky;
    bottom: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    font-size: 16px;
    text-align: center;
    background-color: #fff;
    padding: 10px 15px;
    .reset-btn{
      width: 106px;
      height: 44px;
      border-radius: 22px;
      line-height: 44px;
      background-color: #F5F5F5;
      color: #666;
    }
    .comfirm-btn{
      width: 152px;
      height: 44px;
      line-height: 44px;
      border-radius: 22px;
      background-color: #FFE100;
      color: #333;
    }
  }
}
.select-row{
  color: #666;
  font-size: 14px;
  height: 41px;
  /deep/.van-icon{
    transform: rotate(90deg);
  }
  .select-active{
    color: #7427FF;
    font-weight: bold;
  }
  .upSort{
    transform: rotate(180deg);
  }
}
.border-b{
  border-bottom: 1rpx solid #eeeeee;
}
</style>
